import { AfterViewInit, Component, ElementRef, QueryList, ViewChild, ViewChildren } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: [`
    .even{
      background:pink;
    }
    .odd{
      background:blue;
    }
  `],
})
export class AppComponent implements AfterViewInit {
  title = "angular-guide";
  data=[
    {id:1,title:'ewre',count:5},
    {id:2,title:'ewr',count:3},
    {id:3,title:'tg',count:2},
    {id:4,title:'ee',count:6},
    {id:5,title:'nn',count:8},

  ]
  paragraph="sdfsdsgkjsdlgkjhsdklghskdljfghlksdfjghklsdhjg"
  date=new Date()
  money=155
  jsonData={
    person:{
      name:"ttdf",
      age:33
    }
  }
  number=9;
  onKeyUp(username:HTMLInputElement){
    console.log(username)
  }
  @ViewChild("parag") parag:
  |ElementRef<HTMLParagraphElement>
  |undefined

  @ViewChildren("items") list:QueryList<HTMLLIElement>|undefined
  
  ngAfterViewInit(){
    console.log(this.parag?.nativeElement)
    console.log(this.list?.toArray())
  }
  
}
